import Taro, { Component, Config } from '@tarojs/taro'
import { ScrollView, View } from '@tarojs/components'
import './index.scss'
import { showEmpty } from "@/utils/utils"
import { getIndexDetailPage, getIndexDetailById } from '@/api/systemApi'
import { Loading, LoadMore, EmptyData, GoodsOneList } from '@/components/index'

export default class Index extends Component {
  state: any
  config: Config = {
    backgroundColor: process.env.backgroundColor,
    navigationBarTextStyle: process.env.navigationBarTextStyle,
    navigationBarBackgroundColor: process.env.backgroundColor
  }

  constructor() {
    super(...arguments)
    const { params } = this.$router
    this.state = {
      id: params.id,
      loading: true,
      page: 1,
      limit: 10,
      dataList: [],
      groupInfo: {},
      loadStatus: 'loading',
    }
  }

  componentDidMount () {
    this.getInfo()
    this.getPage()
  }

  //  获取组合信息
  async getInfo() {
    const { id } = this.state
    await getIndexDetailById(id).then(res => {
      this.setState({
        groupInfo: res.data
      })
    })
  }

  //  分页获取商品
  getPage() {
    const { id, page, limit, dataList, loadStatus } = this.state
    if (loadStatus === 'noMore') {
      return
    }
    getIndexDetailPage({ id, page, limit }).then(res => {
      const { list, totalCount } = res.data
      this.setState({
        page: page + 1,
        dataList: page === 1 ? list : dataList.concat(list),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading',
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  render () {
    const { loading, dataList, groupInfo, loadStatus } = this.state
    return (<View className='page'>
      {loading && <Loading/>}
      <ScrollView scrollY className='page-scroll' onScrollToLower={this.getPage.bind(this)}>
        <View className='page-head f-g-5'>{groupInfo.name}</View>
        <View className='page-body'>
          <GoodsOneList list={dataList}/>
          {!showEmpty(dataList, loadStatus) && <LoadMore status={loadStatus}/>}
          {showEmpty(dataList, loadStatus) && <View className='list-empty'><EmptyData type='order'/></View>}
        </View>
      </ScrollView>
    </View>)
  }
}
